<template>
    <div>
        <div v-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.carousel.using && !data.carousel.src[0]">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.video.using && !data.video.src">
            <dont-choose-media/>
        </div>
        <div v-else :class="[{'carousel': data.carousel.using},'ad-wraper']" >
            <div class="ad-header">
                <img class="user-picture" :src="data.userInfo.headImg" alt="img">
                <button type="button" v-if="data.video.using" class="header-zan-btn"><i class="pc-header-zan-icon ad-preview-sp"></i>赞主页</button>
                <h5 class="user-name"><span>{{data.userInfo.name}}</span></h5>
                <div class="sponsor-content">赞助内容 · <i class="sponsor-icon ad-preview-sp"></i></div>
            </div>
            <div class="ad-body">
                <div v-show="data.adText" class="ad-text">{{data.adText}}</div>
                <!--单图片-->
                <div v-if="data.singleImg.using" class="single-img">
                    <img :src="data.singleImg.src" alt="img">
                    <div class="singleImg-info">
                        <div v-show="data.singleImg.title != ''" class="singleImg-title">{{data.singleImg.title}}</div>
                        <div class="singleImg-state">{{data.singleImg.state}}</div>
                        <div class="singleImg-link-btn">
                            <div v-show="data.singleImg.actionCall != '无按钮' && data.singleImg.actionCall != ''" class="singleImg-btn">{{data.singleImg.actionCall}}</div>
                            <div v-show="singleImgLink" class="singleImg-link">{{singleImgLink}}</div>
                        </div>
                    </div>
                </div>
                <!--轮播图-->
                <div v-if="data.carousel.using" class="carousel">
                    <el-carousel trigger="click" :autoplay="true" arrow="never" height="365px">
                        <el-carousel-item v-for="(item,index) in data.carousel.src" :key="item">
                            <div class="">
                                <img class="carousel-img" :src="item" alt="img">
                                <div class="carousel-info">
                                    <div class="carousel-title">{{data.carousel.imageInfo[index].title || '标题 '}}</div>
                                    <div class="carousel-state">{{data.carousel.imageInfo[index].state || '动态消息描述链接'}}</div>
                                    <button v-show="data.carousel.actionCall != '无按钮' && data.carousel.imageInfo[index].actionCall != ''" class="carousel-btn" type="button">{{data.carousel.imageInfo[index].actionCall}}</button>
                                </div>
                            </div>

                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!--视频-->
                <div v-if="data.video.using" class="video">
                    <video :src="data.video.src" id="previewVideo"></video>
                    <span v-show="!play" @click="playVideo" class="iconfont icon-play"></span>
                    <span  @click="pauseVideo" :class="[{show: play},'icon-pause','iconfont']"></span>
                </div>
                <div v-if="data.video.using" class="video-info">
                    <div class="video-title">{{data.video.title || '标题 '}}</div>
                    <div class="video-state">{{data.video.state || '动态消息描述链接'}}</div>
                    <div class="video-link-con">
                        <div class="video-link">{{data.video.link}}</div>
                        <button v-show="data.video.actionCall != '无按钮' && data.video.actionCall != ''" class="video-btn" type="button">{{data.video.actionCall}}</button>
                    </div>
                </div>
            </div>
            <div class="ad-footer">
                <div class="top-line"></div>
                <div class="footer-content">
                    <span class=""><i class="footer-zan-icon ad-oprate-sp"></i>赞</span>
                    <span class=""><i class="comment-icon ad-oprate-sp"></i>评论</span>
                    <span class=""><i class="share-icon ad-oprate-sp"></i>分享</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Carousel,CarouselItem,Button} from 'element-ui'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    Vue.use(Button)
    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                play: false
            }
        },
        computed: {
            singleImgLink: function () {
                if(this.data.showLink) {
                    return this.data.showLink.toUpperCase()
                }else if(this.data.singleImg.link) {
                    return this.data.singleImg.link.toUpperCase()
                }else {
                    return ''
                }
            }
        },
        methods: {
            playVideo(){
                let _this = this;
                let video = document.getElementById('previewVideo');
                video.play();
                this.play = true;
                video.addEventListener('ended',function () {
                    _this.play = false
                })
            },
            pauseVideo(){
                document.getElementById('previewVideo').pause();
                this.play = false
            }
        },
        created () {

        }
    }
</script>

<style lang="scss">
    .ad-wraper .ad-body .el-carousel__arrow{
        margin-top: -33px;
    }
</style>
<style lang="scss" scoped>
    div,span,h5,button,img{
        box-sizing: border-box;
    }
    .ad-preview-sp{
        background-image: url('~assets/img/ad-preview-sp.png');
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
        height: 12px;
        width: 12px;
    }
    .ad-oprate-sp{
        background-image: url('~assets/img/ad-oprate-sp.png');
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
    }
    .pc-header-zan-icon{
        width: 16px;
        height: 16px;
        margin-right: 4px;
        background-position: 0 -80px;
        bottom: 1px;
        position: relative;
        vertical-align: middle;
    }
    .sponsor-icon{
        background-position: 0 -97px;
        bottom: -1px;
        margin-bottom: -5px;
        position: relative;
        vertical-align: top;
    }
    .footer-zan-icon{
        background-position: -144px -49px;
    }
    .comment-icon{
        background-position: -129px -49px;
    }
    .share-icon{
        background-position: -159px -49px;
    }
    .footer-zan-icon,
    .comment-icon,
    .share-icon{
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 6px -3px 0;
    }
    .ad-wraper{
        overflow: hidden;
        position: relative;
        width: 496px;
        margin: 10px auto;
        padding: 12px 12px 0;
        border: 1px solid;
        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
        border-radius: 3px;
        background-color: #fff;
        word-wrap: break-word;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
        &.carousel{
            width: 326px;
         }
    }
    .ad-header{
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 46px;
        margin-bottom: 11px;
        padding: 0 97px 0 48px;
    }
    .user-picture{
        position: absolute;
        left: 0;
        top:0;
        width: 40px;
        height: 40px;
    }
    .header-zan-btn{
        position: absolute;
        top: 0;
        right: 20px;
        width: 59px;
        height: 24px;
        margin: 0;
        padding: 0 8px;
        background-color: #f6f7f9;
        border-color: #ced0d4;
        color: #4b4f56;
        cursor: pointer;
        display: inline-block;
        border: 1px solid;
        border-radius: 2px;
        box-sizing: content-box;
        font-size: 13px;
        transition: 200ms cubic-bezier(.08,.52,.52,1) background-color, 200ms cubic-bezier(.08,.52,.52,1) box-shadow, 200ms cubic-bezier(.08,.52,.52,1) transform;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        text-align: center;
        text-shadow: none;
        text-decoration: none;
        white-space: nowrap;
        line-height: 22px;
    }
    .user-name{
        margin: 0 0 2px 0;
        padding: 0 22px 0 0;
        font-size: 15px;
        font-weight: normal;
        line-height: 1.38;
        color: #1d2129;
    }
    .sponsor-content{
        color: #90949c;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
    }
    .ad-text{
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: normal;
        line-height: 1.38;
    }
    .singleImg-info{
        height: auto;
        padding: 0 12px;
        min-height: 30px;
        font-size: 13px;
        position: relative;
        border: 1px solid #ddd;
        border-top: none;
    }
    .singleImg-title{
        font-size: 19px;
        font-weight: 500;
        line-height: 22px;
        padding: 10px 0 5px;
        max-height: 110px;
        overflow: hidden;
        word-wrap: break-word;
        text-decoration: none;
        transition: color .1s ease-in-out;
        font-family: Georgia, serif;
        letter-spacing: normal;
    }
    .singleImg-state{
        font-family: Helvetica, Arial, sans-serif;
        line-height: 16px;
        max-height: 80px;
        overflow: hidden;
    }
    .singleImg-link-btn{
        position: relative;
        overflow: hidden;
        padding: 4px;
    }
    .singleImg-link{
        color: #90949c;
        font-size: 12px;
        padding-top: 13px;
        padding-right: 8px;
        margin-bottom: 10px;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 12px;
    }
    .singleImg-btn{
        float: right;
        margin: 4px 0 4px 10px;
        padding: 0 8px;
        position: relative;
        top: 0;
        z-index: 2;
        background-color: #f6f7f9;
        border: 1px solid;
        border-color: #ced0d4;
        color: #4b4f56;
        border-radius: 2px;
        box-sizing: content-box;
        cursor: pointer;
        display: inline-block;
        text-decoration: none;
        white-space: nowrap;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        text-align: center;
        text-shadow: none;
        line-height: 24px;
        vertical-align: middle;
        transition: 200ms cubic-bezier(.08,.52,.52,1) background-color, 200ms cubic-bezier(.08,.52,.52,1) box-shadow, 200ms cubic-bezier(.08,.52,.52,1) transform;
    }
    .carousel-info{
        position: relative;
        width: 100%;
        height: 66px;
        padding: 6px 8px;
        overflow: hidden;
    }
    .carousel-title{
        -webkit-box-orient: vertical;
        color: #000;
        display: -webkit-box;
        font-weight: bold;
        height: 36px;
        -webkit-line-clamp: 2;
        margin-bottom: 1px;
        margin-top: 1px;
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
    }
    .carousel-state{
        color: #1d2129;
        height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
    }
    .carousel-btn{
        position: absolute;
        top: 9px;
        right: 0;
        z-index: 2;
        float: right;
        margin: 15px 2px 0 2px;
        background-color: #f6f7f9;
        color: #4b4f56;
        border: 1px solid #ced0d4;
        border-radius: 2px;
        box-sizing: content-box;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        font-family: inherit;
        font-size: inherit;
        padding: 0 8px;
        text-align: center;
        text-shadow: none;
        vertical-align: middle;
        line-height: 22px;
    }
    .ad-footer{
        color: #90949c;
        margin-top: 12px;
        padding-bottom: 4px;
        position: relative;
    }
    .top-line{
        margin-top: 8px;
        padding: 0 12px 8px;
        color: #90949c;
        line-height: 20px;
    }
    .footer-content{
        border-top: 1px solid #e5e5e5;
        padding: 4px 0 0;
        span{
            position: relative;
            color: #7f7f7f;
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            line-height: 14px;
            margin-right: 20px;
            padding: 4px 4px 4px 0;
            transition: 200ms cubic-bezier(.08,.52,.52,1) filter, 200ms cubic-bezier(.08,.52,.52,1) transform;
        }
    }
    .single-img{
        overflow: hidden;
        margin-top: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        position: relative;
        line-height: 1px;
        img{
            position: relative;
            height: auto;
            width: 100%;
            border: 0;
        }
    }
    .carousel{
        .carousel-img{
            width: 100%;
            height: 299px;
            border: none;
        }
    }
    .video{
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        height: 268px;
        width: 476px;
        overflow: hidden;
        position: relative;
        z-index: 0;
        video{
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            transition: 350ms filter ease-in-out, 350ms -webkit-filter ease-in-out;
        }
        span{
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            margin: -25px 0 0 -25px;
            font-size: 50px;
            color: white;
            cursor: pointer;
        }
        .icon-pause{
            display: none;
        }
        &:hover .icon-pause.show{
            display: inline-block;
         }
    }
    .video-info{
        font-size: 13px;
        height: auto;
        padding: 10px 12px;
        overflow: hidden;
        position: relative;
        border: 1px solid #ddd;
        border-top: none;
    }
    .video-title{
        font-size: 19px;
        font-weight: 500;
        line-height: 22px;
        margin-bottom: 5px;
        max-height: 110px;
        overflow: hidden;
        word-wrap: break-word;
        color: inherit;
        text-decoration: none;
        font-family: Georgia, serif;
        letter-spacing: normal;
    }
    .video-state{
        line-height: 16px;
        max-height: 80px;
        overflow: hidden;
    }
    .video-link-con{
        position: relative;
        margin-top: 5px;
        zoom: 1;
    }
    .video-link{
        height: 24px;
        color: #90949c;
        font-size: 12px;
        line-height: 11px;
        padding-top: 13px;
        position: relative;
        text-transform: uppercase;
        overflow: hidden;
    }
    .video-btn{
        position: absolute;
        z-index: 100;
        right: 0;
        top: 0;
        border: 1px solid;
        border-radius: 2px;
        box-sizing: content-box;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        padding: 0 8px;
        text-align: center;
        text-shadow: none;
        vertical-align: middle;
        background-color: #f6f7f9;
        border-color: #ced0d4;
        color: #4b4f56;
        transition: 200ms cubic-bezier(.08,.52,.52,1) background-color, 200ms cubic-bezier(.08,.52,.52,1) box-shadow, 200ms cubic-bezier(.08,.52,.52,1) transform;
        line-height: 22px;
    }
</style>
